<template>
  <!-- 添加案例页面（废弃） -->
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="添 加 案 例">
      <mt-button icon="back" @click="goBack" slot="left">返回</mt-button>
      <mt-button slot="right" @click="goHome">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>

    <!-- 表单区域 -->
    <van-form>
      <van-field
        v-model="patientMsg.name"
        name="name"
        label="姓名"
        placeholder="病人姓名"
        :rules="[{ required: true, message: '请输入预约病例姓名' }]"
      />

      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="patientMsg.sex" direction="horizontal">
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        type="number"
        v-model="patientMsg.age"
        name="id"
        label="年龄"
        placeholder="病人年龄"
        :rules="[{ required: true, message: '请填写病例年龄' }]"
      />

      <van-field
        v-model="patientMsg.idNum"
        name="id"
        label="身份证"
        placeholder="病人身份证"
        :rules="[{ required: true, message: '请填写预约病例身份证' }]"
      />
      <van-field
        type="textarea"
        v-model="patientMsg.record"
        name="name"
        label="病例史"
        placeholder="病人病例史"
        :rules="[{ required: true, message: '请填写病例史' }]"
      />
      <!-- 上传附件 -->
      <div class="upload">
        <van-button round size="small" disabled type="warning"
          >上传附件</van-button
        >
        <van-uploader
          :after-read="afterRead"
          :max-count="1"
          v-model="fileList"
        />
      </div>
    </van-form>
    <!-- 通知栏 -->
    <div class="Notice">
      <van-notice-bar
        left-icon="volume-o"
        mode="closeable"
        text="病历书写是医务人员通过问诊、查体、辅助检查、诊断、治疗、护理等医疗活动获得有关资料，并进行归纳、分析、整理形成医疗活动记录的行为。"
      />
    </div>

    <!-- 提交按钮 -->
    <div class="btn">
      <van-button round block type="info" @click="Btnclick">提交</van-button>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Dialog } from "vant";
export default {
  name: "Addcase",

  data() {
    return {
      //表单数据
      patientMsg: {
        name: "",
        sex: "",
        age: "",
        idNum: "",
        record: "",
        fileList: null, //上传附件图片数据
      },
      fileList: [],
    };
  },

  mounted() {},

  methods: {
    goBack() {
      Dialog.confirm({
        title: "提示",
        message: "返回上一页将不会保存当前已填写信息，请确保返回前提交病案例",
        confirmButtonColor: "#07c160",
        cancelButtonColor: "#ff976a",
      })
        .then(() => {
          this.$router.push({
            path: "./medicalCase",
          });
        })
        .catch(() => {
          Toast({
            message: "cancel",
            duration: 1000,
          });
        });
    },
    goHome() {
      Dialog.confirm({
        title: "提示",
        message: "返回首页将不会保存当前已填写信息，请确保返回前提交病案例",
        confirmButtonColor: "#07c160",
        cancelButtonColor: "#ff976a",
      })
        .then(() => {
          this.$router.push({
            path: "./index",
          });
        })
        .catch(() => {
          console.log("取消支付");
        });
    },
    Btnclick() {
      if (
        this.patientMsg.name == "" ||
        this.patientMsg.sex == "" ||
        this.patientMsg.age == "" ||
        this.patientMsg.idNum == "" ||
        this.patientMsg.record == ""
      ) {
        Toast({
          message: "请完整填写内容",
          duration: 1500,
        });
      } else {
        //调提交接口
        console.log(this.patientMsg);
        Toast.success({
          message: "提交成功",
          duration: 1500,
        });
        /* setTimeout(() => {
          this.$router.push({
            path: "/medicalCase",
          });
        }, 1500); */
      }
    },
    //文件读取完成后的回调函数
    afterRead(file) {
      Toast('请预览')
      this.patientMsg.fileList = file.content;
    },
  },
};
</script>

<style lang="less" scoped>
html,
body,
#app {
  height: 100%;
  background-color: #fff;
}
#app /deep/ .mint-header-title {
  overflow: initial;
}
.van-field--min-height,
.van-field__control {
  min-height: 180px;
}
.Notice {
  margin-top: 10px;
}
.btn {
  position: relative;
  bottom: 3px;
  width: 100%;
  margin-top: 20px;
}
.upload {
  display: flex;
  align-items: center;
  margin-top: 10px;
  padding: 10px 0;
  .van-uploader {
    margin-left: 20px;
  }
}
</style>